<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="所有活动" name="first">
			<el-row :gutter="24">
				<el-col :span="1" style="margin-right:10px;">
					<p class="queryLabel">活动名称:</p>
				</el-col>
				<el-col :span="4">
					<el-input v-model="activityName" placeholder="请输入活动名称" size="small"></el-input>
				</el-col>
				<el-col :span="1" style="margin-right:10px;">
					<p class="queryLabel">发起部门:</p>
				</el-col>
				<el-col :span="4">
					<el-select v-model="data.startDept" placeholder="请选择" left size="small" clearable>
						<el-option v-for="item in deptCombo" :label="item.oName" :value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col :span="1" style="margin-right:10px;">
					<p class="queryLabel">统计区间:</p>
				</el-col>
				<el-col :span="4">
					<el-date-picker size="small" style="width:100%" v-model="data.start" :editable=false type="date" placeholder="开始日期">
					</el-date-picker>
				</el-col>
				<el-col :span="4">
					<el-date-picker size="small" style="width:100%" v-model="data.stop" :editable=false type="date" placeholder="结束日期">
					</el-date-picker>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
				</el-col>
				<el-col :span="3" style="margin-left: -30px;text-align: right">
					<el-button type="primary" size="small" v-on:click='activityInfo'>查看</el-button>
					<el-button type="primary" size="small" v-on:click='activityOut' v-if="btnGroup.export">导出</el-button>
					<!--活动导出-->
				</el-col>
			</el-row>
			<!--
			作者：1813180149@qq.com
			时间：2017-03-06
			描述：活动分析
		-->

			<el-table :data="tableData.dataList" border style="width: 100%;height:460px;" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="活动名称" prop="name" width="190">
				</el-table-column>
				<el-table-column label="发起部门" prop="startDepartment" width="190" :formatter="deptFormate">
				</el-table-column>
				<el-table-column label="状态" prop="status" width="150">
				</el-table-column>
				<el-table-column label="创建日期" align="center" prop="startDate" :formatter="buyDateStart" width="150">
				</el-table-column>
				<el-table-column label="截止日期" align="center" prop="stopDate" :formatter="buyDateStop" width="150">
				</el-table-column>
				<el-table-column label="已进行" align="right" prop="ing" width="150">
				</el-table-column>
				<!--<el-table-column label="发券数" align="right" prop="issue" width="80">
						</el-table-column>-->
				<el-table-column label="发券成本" align="right" prop="issueCost" width="100">
				</el-table-column>
				<el-table-column label="消费成本" align="right" prop="usedCost" width="100">
				</el-table-column>
				<!--<el-table-column label="创建数" align="right" prop="joincount" width="100">
				</el-table-column>-->
				<el-table-column label="发放数" align="right" prop="issue" width="80">
				</el-table-column>
				<el-table-column label="使用数" align="right" prop="used">
				</el-table-column>
				<!--<el-table-column label="未打印数" align="right" prop="noprint" width="100">
						</el-table-column>-->
				<el-table-column label="过期数" align="right" prop="expire" width="100">
				</el-table-column>
				<el-table-column label="剩余数" align="right" prop="surplus" width="100">
				</el-table-column>
				<el-table-column label="产值" align="right" prop="match" width="150" :formatter="Fmatch">
				</el-table-column>
				<!--<el-table-column label="操作" width="80" fixed="right" >
								<el-table :data="tableData.dataList" border style="width: 100%" @selection-change="handleSelectionChange">
									<el-table-column type="selection"
								    	             width="60"
								    	             fixed
								    	             >
		                            </el-table-column>
									<el-table-column label="活动名称" prop="name" width="370">
									</el-table-column>
									<el-table-column label="状态" prop="status" width="150">
									</el-table-column>
									<el-table-column label="创建日期" prop="startDate" :formatter="buyDateStart" width="150">
									</el-table-column>
									<el-table-column label="截止日期" prop="stopDate" :formatter="buyDateStop" width="150">
									</el-table-column>
									<el-table-column label="已进行" prop="ing" width="200">
									</el-table-column>
									<el-table-column label="发券数" prop="issue" width="150">
									</el-table-column>
									<el-table-column label="已消费" prop="used" width="150">
									</el-table-column>
									<el-table-column label="产值" prop="match" width="200">
									</el-table-column>
									<!--<el-table-column label="操作" width="80" fixed="right" >
										<template scope="scope">
											<el-tooltip class="item" effect="light" content="查看详情" placement="top">
												<el-button type="info" size="mini" icon="menu" @click.native.prevent="activityInfo(scope.$index)"></el-button>
											</el-tooltip>
										</template>
									</el-table-column>-->

			</el-table>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>
			<!--</el-col>
						</el-row>
					</div>-->
		</el-tab-pane>
		<el-tab-pane label="活动详情" name="second">
			<el-tabs v-model="activeNames" @tab-click="handleClick">
				<el-tab-pane label="活动报表" name="one">

					<div id="charts">
						<div id="main" :style="{width:'1000px',height:'400px'}"></div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="优惠券详情" name="two">
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">使用状态:</p>
						</el-col>
						</el-col>
						<el-col :span="3">
							<el-select v-model="taskStatus" style="width:100%" size='small' placeholder="优惠券状态" clearable>
								<el-option label="未使用" value="1">
								</el-option>
								<el-option label="已使用" value="2">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">选择维度:</p>
						</el-col>
						<el-col :span="3">
							<el-select v-model="timeType" style="width:100%" size='small' placeholder="请选择时间" clearable>
								<el-option label="打印时间" value="0">
								</el-option>
								<el-option label="使用时间" value="1">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">开始时间:</p>
						</el-col>
						<el-col :span="4">
							<el-date-picker size="small" style="width:100%" v-model="data.start" :editable=false type="date" placeholder="开始日期">
							</el-date-picker>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">结束时间:</p>
						</el-col>
						<el-col :span="4">
							<el-date-picker size="small" style="width:100%" v-model="data.stop" :editable=false type="date" placeholder="结束日期">
							</el-date-picker>
						</el-col>
						<el-col :span="6" style="margin-left:-40px;text-align: right;">
							<el-button type="primary" size="small" v-on:click='activityInfos'>查询</el-button>
							<el-button type="primary" size="small" v-if="multipleSelection.length>0&&btnGroup.export" v-on:click='activityInfosOut'>导出</el-button>
							<!--优惠券导出-->
						</el-col>
					</el-row>

					<el-table :data="tableDatas.dataList" border style="width: 100%;height:460px;">
						<el-table-column label="优惠券号" align="right" prop="num" width="200" fixed>
						</el-table-column>
						<el-table-column label="打印时间" align="center" prop="dayinDate" :formatter="buyDateDY" width="150">
						</el-table-column>
						<el-table-column label="使用时间" align="center" prop="useDate" :formatter="buyDateU" width="150">
						</el-table-column>
						<el-table-column label="使用工单" prop="gongdanId" width="150">
						</el-table-column>
						<el-table-column label="车牌号" prop="plateNum" width="150">
						</el-table-column>
						<el-table-column label="车主姓名" prop="contactName" width="150">
						</el-table-column>
						<el-table-column label="联系电话" align="right" prop="contactPhone" width="150">
						</el-table-column>
						<el-table-column label="所属活动" prop="name" width="250">
						</el-table-column>
						<el-table-column label="赠送礼品" prop="gift" width="150">
						</el-table-column>
						<el-table-column label="活动开始" align="center" prop="startDate" :formatter="buyDateStart" width="150">
						</el-table-column>
						<el-table-column label="活动结束" align="center" prop="stopDate" :formatter="buyDateStop" width="150">
						</el-table-column>
						<el-table-column label="活动成本" align="right" prop="activityCost" width="150">
						</el-table-column>
						<!--<el-table-column label="赠送礼品" prop="gift" width="160">
								</el-table-column>
							-->
						<!--<el-table-column label="使用时间" prop="useDate" :formatter="buyDateU">
								</el-table-column>-->
					</el-table>
					<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="pages.pageSizes" :page-size="pages.pageSize" layout=" total,prev, pager, next" :total="tableDatas.total">
					</el-pagination>
				</el-tab-pane>
			</el-tabs>

		</el-tab-pane>
	</el-tabs>
</template>
<script>
import echarts from 'echarts'
export default {
	data: function() {
		return {
			//部门转换
			deptConvert: {},
			deptCombo: [],
			//companyId:"",
			//详情查询
			dayinDate: '',
			useDate: '',
			//查询条件
			data: {
				start: '',
				stop: '',
				startDept: '',
			},
			//活动名称查询条件
			activityName: '',
			//选择时间
			timeType: '',
			//优惠券查询使用状态
			taskStatus: '',
			activeName: 'first',
			activeNames: 'one',
			msg: "123",
			//页码数
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//页码数
			CurentPages: 1,
			//每页的数量
			pages: this.page,
			//分组数据
			tableDatas: {
				total: 0,
				dataList: []
			},
			time: '',
			chart: {
				used: [
					[1490320132296, 5],
					[1490320659312, 1],
					[1490320744703, 7]
				],
				people: [
					[1490320132296, 4],
					[1490320659312, 6],
					[1490320744703, 4]
				],
				sumPeople: [
					[1490320132296, 4],
					[1490320659312, 6],
					[1490320744703, 4]
				],
				sumUsed: [
					[1490320132296, 4],
					[1490320659312, 6],
					[1490320744703, 4]
				],
			},
			index: '',
			multipleSelection: [],
			//				selectlength=
			btnGroup: {},
		}
	},
	methods: {
		// 产值取值保留2位
		Fmatch: function(row, column) {

			if (row.match == "" || row.match == null) {
				return "0";
			}
			else {
				var temp = Number(row.match);
				return temp.toFixed(2);
			}

		},
		//部门格式转换
		deptFormate: function(row, column) {
			if (row.startDepartment == "" || row.startDepartment == null) return "";
			return this.$data.deptConvert[row.startDepartment];
		},
		//选择框
		handleSelectionChange: function(val) {
			debugger;

			//				var arr=[];
			//				arr.push(val)
			//				(val.length);
			this.$data.multipleSelection = val;
			//				alert(this.$data.multipleSelection.length)
			if (this.$data.multipleSelection.length > 1)
				this.$message.error("请选择一条数据！");
		},
		//获取发起部门
		getCompany: function() {
			debugger;
			this.$http.get(this.API_ROOT + '/rbac/dept/depyList', {
				params: {}
			}).then((response) => {
				this.$data.deptCombo = response.data.dataList;
				//this.$data.levelConvertData = response.data;
			}, (response) => { });
		},
		//加载echarts的图形报表
		mounteds: function() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: "活动分布"
				},
				tooltip: {
					trigger: "axis"
				},
				legend: {
					data: ["累计参与", "累计使用", "参与人数", "消费券使用"]
				},
				grid: {
					x: 40,
					x2: 40,
					y: 40,
					y2: 40
				},
				calculable: !0,
				xAxis: [{
					type: 'time',
					//splitNumber: 10,
					//data:
					min: this.$data.chart.start,
					max: this.$data.chart.stop
				}],
				yAxis: [{
					type: "value",
				}],
				series: [{
					name: "累计参与",
					type: "line",
					data: this.$data.chart.sumPeople, //this.data.chart.people,
					markPoint: {
						data: [{
							type: "max",
							name: "最大值"
						}, {
							type: "min",
							name: "最小值"
						}]
					},
				}, {
					name: "累计使用",
					type: "line",
					data: this.$data.chart.sumUsed,
					markPoint: {
						data: [{
							type: "max",
							name: "最大值"
						}, {
							type: "min",
							name: "最小值"
						}]
					},
				}, {
					name: "参与人数",
					type: "bar",
					data: this.$data.chart.people,
					barWidth: '10',
				}, {
					name: "消费券使用",
					type: "bar",
					data: this.$data.chart.used,
					barWidth: '10',
				}],

			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},
		typeChange: function(value) {
			debugger;

			this.activityInfos();
		},
		//查询
		baseQuery: function() {
			debugger;
			if (this.$data.data.start == '' || this.$data.data.start == null) {
				this.$data.data.start = ''
			} else {
				this.$data.data.start = new Date(this.$data.data.start).getTime();
			};
			if (this.$data.data.stop == '' || this.$data.data.stop == null) {
				this.$data.data.stop = ''
			} else {
				this.$data.data.stop = new Date(this.$data.data.stop).getTime();
			};
			//				var dates;
			//				if(this.$data.time == '') {
			//					dates = this.$data.time;
			//				} else {
			//					dates = this.moment(this.$data.time).format("YYYY-MM");
			//				}
			this.$http.post(this.API_ROOT + '/crm/kpi/ActivePage', this.$data.data, {
				params: {
					name: this.$data.activityName,
					start: this.$data.CurentPage,
					limit: this.page.pageSize
				}
			}).then(resp => {
				if (resp.data.success) {
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.tableData = resp.data;
				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
		},

		//列表，分页大小切换
		handleSizeChange: function() { },
		//列表,当前页切换
		handleCurrentChange: function(currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.baseQuery();
		},
		//列表,当前页切换
		handleCurrentChanges: function(currentPage) {
			this.$data.CurentPages = currentPage;
			//this.$data.dictGroup = '';
			this.activityInfos();
		},
		//切换tab页
		handleClick: function(tab, event) {
			console.log(tab, event);

		},
		activityInfo: function() {
			if (this.$data.multipleSelection.length == 1) {
				this.$data.data.start = '';
				this.$data.data.stop = '';
				this.$data.taskStatus = '';
				this.$data.timeType = '';
				this.$data.index = this.$data.multipleSelection[0].id;
				this.activityInfos();
				this.activityTable();
			} else {
				this.$message.error("请选择一条数据！");
			}
		},
		//活动导出
		activityOut: function() {
			debugger;
			if (this.$data.data.start == '' || this.$data.data.start == null) {
				this.$data.data.start = ''
			} else {
				this.$data.data.start = new Date(this.$data.data.start).getTime();
			};
			if (this.$data.data.stop == '' || this.$data.data.stop == null) {
				this.$data.data.stop = ''
			} else {
				this.$data.data.stop = new Date(this.$data.data.stop).getTime();
			};
			this.$http.post(this.API_ROOT + '/crm/activity/excel/ActivityCX', this.$data.data, {
				params: {
					name: this.$data.activityName,
					start: this.$data.CurentPage,
					limit: this.page.pageSize
				}
			}).then(resp => {
				debugger;
				if (resp.data.success) {
					window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=活动-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";

				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
		},
		//导出
		activityInfosOut: function() {
			debugger;
			if (this.$data.data.start == '' || this.$data.data.start == null) {
				this.$data.data.start = ''
			} else {
				this.$data.data.start = new Date(this.$data.data.start).getTime();
			};
			if (this.$data.data.stop == '' || this.$data.data.stop == null) {
				this.$data.data.stop = ''
			} else {
				this.$data.data.stop = new Date(this.$data.data.stop).getTime();
			};
			window.location.href = this.API_ROOT + '/crm/coupon/excel/cousponOut?id=' + this.$data.index + '&type=' + this.$data.taskStatus + '&startDate=' + this.$data.data.start + '&stopDate=' + this.$data.data.stop + '&timeType=' + this.$data.timeType;
		},
		//详情
		activityInfos: function() {
			debugger;
			//this.activityTable(index);
			//var data = this.$data.tableData.dataList[index];
			var resRoleData = this.$data.multipleSelection[0];
			if (this.$data.data.start == '' || this.$data.data.start == null) {
				this.$data.data.start = ''
			} else {
				this.$data.data.start = new Date(this.$data.data.start).getTime();
			};
			if (this.$data.data.stop == '' || this.$data.data.stop == null) {
				this.$data.data.stop = ''
			} else {
				this.$data.data.stop = new Date(this.$data.data.stop).getTime();
			};
			this.$http.post(this.API_ROOT + '/crm/kpi/CouponPage', this.$data.data, {
				params: {
					timeType: this.$data.timeType,
					type: this.$data.taskStatus,
					id: resRoleData.id,
					start: this.$data.CurentPages,
					limit: this.page.pageSize
				}
			})
				.then(resp => {
					if (resp.data.success) {
						debugger;
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableDatas = resp.data;
						this.$data.activeName = "second";
						//this.$data.activeNames = "two";
						this.mounteds();
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => { });
		},
		//图形报表
		activityTable: function() {
			//var data = this.$data.tableData.dataList[index];
			this.$http.get(this.API_ROOT + '/crm/kpi/activityTable', {
				params: {
					activityId: this.$data.index,
				}
			})
				.then(resp => {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.chart = resp.data;
					//this.$data.activeName = "second";
					//this.$data.activeNames = "one";
					this.mounteds();
				}, resp => { });
		},
		//状态转换
		statusCov: function(row, column) {
			return row.newRemind == "0" ? '已预约' : '未预约';
		},

		//时间转换
		buyDateStart: function(row, column) {
			if (row.startDate == "" || row.startDate == null) return "";
			return this.moment(Number(row.startDate)).format("YYYY-MM-DD");
		},
		//时间转换
		buyDateStop: function(row, column) {
			if (row.stopDate == "" || row.stopDate == null) return "";
			return this.moment(Number(row.stopDate)).format("YYYY-MM-DD");
		},
		//时间转换
		buyDateDY: function(row, column) {
			if (row.dayinDate == "" || row.dayinDate == null) return "";
			return this.moment(Number(row.dayinDate)).format("YYYY-MM-DD");
		},
		//时间转换
		buyDateU: function(row, column) {
			if (row.useDate == "" || row.useDate == null) return "";
			return this.moment(Number(row.useDate)).format("YYYY-MM-DD");
		},

	},
	//表单创建时执行
	created: function() {
		this.baseQuery();
		this.getCompany();
		/*部门转换*/
		this.$http.get(this.API_ROOT + '/rbac/dept/convert', {
			params: {}
		}).then((response) => {
			this.$data.deptConvert = response.data;
			//this.$data.levelConvertData = response.data;
		}, (response) => { });
		this.$http({
			method: 'GET',
			url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
			params: { //发送的参数
				resPath: "crm/KPI/activityAnalysis", ////查询条件 按照输入的车牌号
			}
		}).then(function(resp) {
			var btnData = resp.data.dataList;

			var temp = {};

			for (var i = 0; i < btnData.length; i++) {

				var btnName = btnData[i].btnName;

				temp[btnName] = btnName;

			}

			Object.assign(this.$data.btnGroup, temp);
		}, function(error) {
			// error
		})
	}
}
</script>
<style>
.el-table .info-row {
	height: 10px !important;
}

.item {
	width: 30px;
}

.el-form-item {
	clear: both;
}

.el-dropdown .el-button-group,
.el-table .el-tooltip,
.el-table .el-tooltip__rel {
	display: inline;
}

#el-select {
	width: 200px;
}
</style>